<template>
	<!-- 工单首页 -->
	<div class="layout-padding">
		<basic-container class="layout-padding-auto layout-padding-view">
			<div class="card">
				<div class="top">
					<div class="time">
						<div :class="[index === 1 ? 'active0' : '']" @click="getYear">本年</div>
						<div :class="[index === 2 ? 'active0' : '']" @click="getMonth">本月</div>
						<div :class="[index === 3 ? 'active0' : '']" @click="getDate">本日</div>
					</div>
				</div>
				<div class="card-data">
					<div class="number" v-for="(item, index) in dataArr" :key="index">
						<div class="n-title">{{ item.name }}</div>
						<!--            <div class='n-num'>{{ item.value }}</div>-->
						<avue-count-up class="n-num" :end="item.value"></avue-count-up>
					</div>
				</div>
			</div>
			<div class="chart">
				<div class="chart-top">
					<div :class="[index1 === 1 ? 'active1' : '']" @click="getYear1">本年</div>
					<div :class="[index1 === 2 ? 'active1' : '']" @click="getMonth1">本月</div>
					<div :class="[index1 === 3 ? 'active1' : '']" @click="getDate1">本日</div>
				</div>
				<div class="chart-box">
					<div class="chart-left">
						<div class="c-title">报修分析统计</div>
						<div id="pie-chart" ref="pieChart"></div>
					</div>
					<div class="chart-left">
						<div class="c-title">报修方式统计</div>
						<div id="pie-chart2" ref="pieChart2"></div>
					</div>
				</div>
			</div>
			<div class="line-chart">
				<div class="line-top">
					<div :class="[index2 === 1 ? 'active2' : '']" @click="getYear2">本年</div>
					<div :class="[index2 === 2 ? 'active2' : '']" @click="getMonth2">本月</div>
					<div :class="[index2 === 3 ? 'active2' : '']" @click="getDate2">本日</div>
				</div>
				<div class="line-box">
					<div id="line-chart" ref="lineChart"></div>
				</div>
			</div>
			<div class="total-data">
				<div class="t-title">工单数据汇总分析</div>
				<div class="t-table">
					<el-table :data="tableData" border stripe style="width: 100%">
						<el-table-column prop="date" label="时间" align="center"></el-table-column>
						<el-table-column prop="未指派" label="未指派" align="center"></el-table-column>
						<el-table-column prop="已指派" label="已指派" align="center"></el-table-column>
						<el-table-column prop="处理中" label="处理中" align="center"></el-table-column>
						<el-table-column prop="出发中" label="出发中" align="center"></el-table-column>
						<el-table-column prop="挂起" label="挂起" align="center"></el-table-column>
						<el-table-column prop="已到达" label="已到达" align="center"></el-table-column>
						<el-table-column prop="已处理" label="已处理" align="center"></el-table-column>
						<el-table-column prop="已解决" label="已解决" align="center"></el-table-column>
						<el-table-column prop="已关闭" label="已关闭" align="center"></el-table-column>
						<el-table-column prop="已取消" label="已取消" align="center"></el-table-column>
						<el-table-column prop="总数" label="总数" align="center"></el-table-column>
					</el-table>
				</div>
			</div>
		</basic-container>
	</div>
</template>

<script>
//   import echarts from '@/util/chart'
import echarts from '/@/utils/chart.js';
import { getData, getList, getTypeList } from '/@/api/workorder/homepage';
import { genDaysArr } from '/@/util/date';

export default {
	name: 'homepage',
	data() {
		return {
			index: 1,
			index1: 1,
			index2: 1,
			list: [[], [], []],
			dataArr: [],
			chartList: [],
			filterChartList: [],
			chartTypeList: [],
			filterChartTypeList: [],
			lineTypeList: [], // 折线图x轴标签
			lineType: [], // 折线图数据类型
			linResData: {}, // 折线图请求数据
			lineData: [], // 折线图数据
			interval: 0,
			linYearData: {
				lastYearList: [],
				yearList: [],
				xName: [],
			}, // 折线图本年数据
			tableData: [
				{
					date: '本日',
				},
				{
					date: '本月',
				},
				{
					date: '本年',
				},
			],
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		// 获取数据
		getData() {
			getList().then((res) => {
				console.log(res.data, '查询');
				for (let i in res.data.yearMap) {
					let o = {};
					o['name'] = i;
					o['value'] = res.data.yearMap[i];
					this.list[0].push(o);
				}
				for (let i in res.data.mouthMap) {
					let o = {};
					o['name'] = i;
					o['value'] = res.data.mouthMap[i];
					this.list[1].push(o);
				}
				for (let i in res.data.dayMap) {
					let o = {};
					o['name'] = i;
					o['value'] = res.data.dayMap[i];
					this.list[2].push(o);
				}
				this.list = this.list.map((item) => {
					let arr1 = item.filter((obj) => {
						return obj.name !== '总数';
					});
					let arr2 = item.find((item1) => {
						return item1.name === '总数';
					});
					arr1.push(arr2);
					return arr1;
				});
				// 获取饼状图1数据
				this.chartList = this.list.map((item) => {
					return item.filter((obj) => {
						return obj.name !== '总数';
					});
				});
				this.getYear();
				this.getYear1();
				// 获取表格数据
				Object.assign(this.tableData[0], res.data.dayMap);
				Object.assign(this.tableData[1], res.data.mouthMap);
				Object.assign(this.tableData[2], res.data.yearMap);
			});
			// 获取饼状图2的数据
			getTypeList().then((res) => {
				this.chartTypeList = res.data[0];
				this.getYear1();
			});
			// 获取折线图数据
			getData().then((res) => {
				this.linResData.yearList = res.data[0].yearList.map((item) => {
					return item.value;
				});
				this.linResData.lastYearList = res.data[0].lastYearList.map((item) => {
					return item.value;
				});
				this.linResData.todayList = res.data[0].todayList.map((item) => {
					return item.value;
				});
				this.linResData.yesterdayList = res.data[0].yesterdayList.map((item) => {
					return item.value;
				});
				this.linResData.monthList = genDaysArr().map((item) => {
					let obj = res.data[0].monthList.find((item1) => {
						return item === item1.name;
					});
					return obj ? obj.value : 0;
				});
				this.linResData.lastMonthList = genDaysArr('last').map((item) => {
					let obj = res.data[0].lastMonthList.find((item1) => {
						return item === item1.name;
					});
					return obj ? obj.value : 0;
				});
				this.getYear2();
			});
		},
		getYear() {
			this.index = 1;
			this.dataArr = this.list[0];
		},
		getMonth() {
			this.index = 2;
			this.dataArr = this.list[1];
		},
		getDate() {
			this.index = 3;
			this.dataArr = this.list[2];
		},
		getYear1() {
			this.index1 = 1;
			this.filterChartList = this.chartList[0];
			this.initChart();
			this.filterChartTypeList = this.chartTypeList.yearList;
			this.initChart2();
		},
		getMonth1() {
			this.index1 = 2;
			this.filterChartList = this.chartList[1];
			this.initChart();
			this.filterChartTypeList = this.chartTypeList.mouthList;
			this.initChart2();
		},
		getDate1() {
			this.index1 = 3;
			this.filterChartList = this.chartList[2];
			this.initChart();
			this.filterChartTypeList = this.chartTypeList.dayList;
			this.initChart2();
		},
		getYear2() {
			this.index2 = 1;
			this.lineType = ['去年', '今年'];
			this.lineTypeList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
			this.interval = 0;
			const d = new Date();
			const m = d.getMonth() + 1;
			this.linResData.yearList.splice(m, this.linResData.yearList.length);
			this.lineData[0] = this.linResData.lastYearList;
			this.lineData[1] = this.linResData.yearList;
			this.initChart3();
		},
		getMonth2() {
			this.index2 = 2;
			this.lineType = ['上月', '本月'];
			this.lineTypeList = genDaysArr();
			this.interval = 1;
			const d = new Date();
			const days = d.getDate();
			this.linResData.monthList.splice(days, this.linResData.monthList.length);
			this.lineData[0] = this.linResData.lastMonthList;
			this.lineData[1] = this.linResData.monthList;
			this.initChart3();
		},
		getDate2() {
			this.index2 = 3;
			this.lineType = ['昨天', '今天'];
			this.interval = 0;
			this.lineTypeList = [
				'00:00',
				'01:00',
				'02:00',
				'03:00',
				'04:00',
				'05:00',
				'06:00',
				'07:00',
				'08:00',
				'09:00',
				'10:00',
				'11:00',
				'12:00',
				'13:00',
				'14:00',
				'15:00',
				'16:00',
				'17:00',
				'18:00',
				'19:00',
				'20:00',
				'21:00',
				'22:00',
				'23:00',
			];
			const d = new Date();
			const days = d.getHours() + 1;
			this.linResData.todayList.splice(days, this.linResData.todayList.length);
			this.lineData[0] = this.linResData.yesterdayList;
			this.lineData[1] = this.linResData.todayList;
			this.initChart3();
		},
		// 渲染保修统计饼状图
		initChart() {
			//检测是否已经存在echarts实例，如果不存在，则不再去初始化
			let myChart = echarts.getInstanceByDom(this.$refs.pieChart);
			//如果为空 则正常进行渲染 反之 不再进行初始化
			if (myChart == null) {
				myChart = echarts.init(this.$refs.pieChart);
			}
			myChart.setOption({
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'vertical',
					top: '5%',
					left: 'left',
				},
				color: ['#5470c6', '#73c0de', '#fac858', '#91cc75', '#ee6666'],
				series: [
					{
						name: '报修统计',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							formatter(param) {
								// correct the percentage
								return param.name + ' (' + param.percent + '%)';
							},
						},
						labelLine: {
							normal: {
								length: 28, //第一条线
								length2: 20, //第二条线
								lineStyle: {
									width: 1, // 线条的宽度
									color: '#999', //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
								},
							},
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 20,
								fontWeight: 'bold',
							},
						},
						data: this.filterChartList,
					},
				],
			});
		},
		initChart2() {
			//检测是否已经存在echarts实例，如果不存在，则不再去初始化
			let myChart = echarts.getInstanceByDom(this.$refs.pieChart2);
			//如果为空 则正常进行渲染 反之 不再进行初始化
			if (myChart == null) {
				myChart = echarts.init(this.$refs.pieChart2);
			}
			myChart.setOption({
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'vertical',
					top: '5%',
					right: 'right',
				},
				color: ['#5470c6', '#73c0de', '#fac858', '#91cc75', '#ee6666'],
				series: [
					{
						name: '报修方式',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							formatter(param) {
								// correct the percentage
								return param.name + ' (' + param.percent + '%)';
							},
						},
						labelLine: {
							normal: {
								length: 28, //第一条线
								length2: 20, //第二条线
								lineStyle: {
									width: 1, // 线条的宽度
									color: '#999', //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
								},
							},
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 20,
								fontWeight: 'bold',
							},
						},
						data: this.filterChartTypeList,
					},
				],
			});
		},
		initChart3() {
			//检测是否已经存在echarts实例，如果不存在，则不再去初始化
			let myChart = echarts.getInstanceByDom(this.$refs.lineChart);
			//如果为空 则正常进行渲染 反之 不再进行初始化
			if (myChart == null) {
				myChart = echarts.init(this.$refs.lineChart);
			}

			myChart.setOption({
				title: {
					left: 'center',
					text: '报修趋势分析',
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: this.lineType,
					left: 'left',
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				// toolbox: {
				//   feature: {
				//     saveAsImage: {}
				//   }
				// },
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.lineTypeList,
					axisLabel: {
						interval: this.interval,
					},
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: this.lineType[0],
						type: 'line',
						smooth: true,
						data: this.lineData[0],
					},
					{
						name: this.lineType[1],
						type: 'line',
						smooth: true,
						data: this.lineData[1],
					},
				],
			});
		},
	},
};
</script>

<style lang="scss" scoped>
#pie-chart {
	margin-top: 20px;
	height: 260px;
}

#pie-chart2 {
	margin-top: 20px;
	height: 280px;
}

#line-chart {
	height: 420px;
}

.card {
	width: 100%;
	height: 130px;

	.top {
		display: flex;
		justify-content: space-between;

		.time {
			display: flex;
			//justify-content: end;
			width: 100%;
			height: 35px;
			border-bottom: 1px solid #eee;

			& > div {
				padding: 0 20px;
				height: 36px;
				transition: all 0.5s;
				line-height: 36px;
				text-align: center;
				cursor: pointer;

				&:not(:last-child) {
					border-right: 1px solid #eee;
				}

				&:hover {
					background: var(--el-color-primary);
					color: #fff;
				}
			}

			.active0 {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
	}

	.card-data {
		display: flex;
		justify-content: space-between;
		padding-top: 20px;

		.number {
			display: flex;
			justify-content: space-between;
			width: 8%;
			height: 80px;
			background-color: #f1f3f7;
			font-size: 14px;

			.n-title {
				padding: 10px 0 5px 15px;
				width: 70px;
				height: 20px;
			}

			.n-num {
				padding: 20px 15px 0 0;
				font-size: 30px;
				font-weight: 600;
				color: var(--el-color-primary);
			}
		}
	}
}

.chart {
	margin-top: 35px;
	width: 100%;
	height: 350px;

	.chart-top {
		display: flex;
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #eee;

		div {
			padding: 0 20px;
			height: 36px;
			transition: all 0.5s;
			line-height: 36px;
			text-align: center;
			cursor: pointer;

			&:not(:last-child) {
				border-right: 1px solid #eee;
			}

			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}

		.active1 {
			background: var(--el-color-primary);
			color: #fff;
		}
	}

	.chart-box {
		display: flex;
		width: 100%;

		.chart-left {
			width: 50%;
			padding: 20px;
			text-align: center;

			.c-title {
				font-size: 16px;
				font-weight: 600;
			}
		}
	}
}

.line-chart {
	margin-top: 30px;
	width: 100%;
	height: 500px;

	.line-top {
		display: flex;
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #eee;

		div {
			// margin: 0 15px;
			// border: 1px solid #eee;
			padding: 0 20px;
			height: 36px;
			transition: all 0.5s;
			line-height: 36px;
			text-align: center;
			cursor: pointer;

			&:not(:last-child) {
				border-right: 1px solid #eee;
			}

			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}

		.active2 {
			background: var(--el-color-primary);
			color: #fff;
		}
	}

	.line-box {
		width: 100%;
		height: 450px;
		padding: 20px;
	}
}

.total-data {
	margin-top: 10px;
	width: 100%;
	height: 300px;

	.t-title {
		font-size: 16px;
		font-weight: 800;
		color: var(--el-color-primary);
		height: 35px;
		border-bottom: 1px solid #eee;
	}

	.t-table {
		padding-top: 10px;
		width: 100%;
	}
}
</style>
